<template>
  <div class="pageBox">
    <head-component
      title="注册"
      :back="true"
      :backIcon="backIcon"
    ></head-component>
    <div class="main">
      <img class="caisetiao_icn" src="@/image/login/caisetiao_icn.png" alt="" />
      <div class="iptBox">
        <div class="iptTitle">姓名</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.nickname"
            placeholder="请输入姓名"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">手机号</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.mobile"
            placeholder="请输入手机号"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">验证码</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.captcha"
            placeholder="请输入您的验证码"
          />
          <button
            class="captBtn"
            @click="onCaptBtn"
            :disabled="captBtnDisabled"
          >
            {{ captBtnText }}
          </button>
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">设置密码</div>
        <div class="iptItem flex-between">
          <input
            type="password"
            class="ipt"
            v-model="form.password"
            placeholder="设置登录密码"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">确认密码</div>
        <div class="iptItem flex-between">
          <input
            type="password"
            class="ipt"
            v-model="form.password2"
            placeholder="再次输入您的密码"
          />
        </div>
      </div>

      <div class="iptBox">
        <div class="iptTitle">推荐人</div>
        <div class="iptItem flex-between">
          <input
            type="text"
            class="ipt"
            v-model="form.recommend"
            placeholder="请输入推荐人信息"
            :readonly="readonly"
          />
        </div>
      </div>

      <div class="agreement flex-center">
        <van-checkbox v-model="checked">
          我已认真阅读并同意
          <template #icon="props">
            <img
              class="img-icon"
              :src="props.checked ? activeIcon : inactiveIcon"
            />
          </template>
        </van-checkbox>
        <div class="agree" @click="show = true">《注册协议》</div>
      </div>

      <button class="subBtn" @click="onSubBtn">立即注册</button>

      <div class="noAccount flex-center">
        <p>已有账号，</p>
        <button @click="$router.push('/login')">去登录</button>
      </div>
    </div>

    <van-popup v-model:show="show" round>
      <div class="popupBox">
        <div class="popupTitle flex-center">注册协议</div>
        <div class="popupCon" v-html="con"></div>
        <button class="popupBtn" @click="onKnow">知道了</button>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast } from "vant";
import { defineComponent, onMounted, reactive, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const backIcon = require("../../image/header/fanhui2_btn.png");

    const form = reactive({
      nickname: "",
      mobile: "",
      captcha: "",
      password: "",
      password2: "",
      recommend: "",
    });

    const captBtnText = ref("发送验证码");
    const captBtnDisabled = ref(false);
    const invitedForm = ref("");
    const readonly = ref(false);
    const activeIcon = require("../../image/login/gouxuan_btn.png");
    const inactiveIcon = require("../../image/login/gouxuan_btn2.png");
    const checked = ref(false);
    const show = ref(false);
    const con = ref(null);

    function onCaptBtn() {
      if (!form.mobile) {
        Toast("请输入手机号");
        return;
      }
      post("/portal", {
        module: "Account",
        interface: "1001",
        data: {
          account: form.mobile,
        },
      }).then(() => {
        Toast("发送成功");
        let time = 60;
        let timer = setInterval(() => {
          time--;
          if (time <= 0) {
            clearInterval(timer);
            timer = null;
            captBtnText.value = "发送验证码";
            captBtnDisabled.value = false;
          } else {
            captBtnText.value = `${time}s`;
            captBtnDisabled.value = true;
          }
        }, 1000);
      });
    }

    function onSubBtn() {
      if (!form.nickname) {
        Toast("请输入姓名");
        return;
      }
      if (!form.mobile) {
        Toast("请输入手机号");
        return;
      }
      if (!form.captcha) {
        Toast("请输入您的验证码");
        return;
      }
      if (!form.password) {
        Toast("请设置登录密码");
        return;
      }
      if (form.password != form.password2) {
        Toast("密码输入不一致");
        return;
      }
      if (!form.recommend) {
        Toast("请输入推荐人信息");
        return;
      }
       if (!checked.value) {
        Toast("认真阅读并同意《注册协议》");
        return;
      }
      post("/portal", {
        module: "Account",
        interface: "1002",
        data: {
          username: form.nickname,
          account: form.mobile,
          captcha: form.captcha,
          password: form.password,
          inviteCode: form.recommend,
        },
      }).then((res) => {
        Toast("注册成功");
        if (!invitedForm.value) {
          setTimeout(() => {
            router.push("/login");
          }, 1000);
        } else {
          console.log("被人邀请", res);
          router.push("/login");
        }
      });
    }

    function onKnow() {
      show.value = false;
      checked.value = true;
    }

    function getCon() {
      post("/portal", {
        module: "Content",
        interface: "4003",
        data: {
          name: "service_agreement",
        },
      }).then((res) => {
        console.log(res);
        con.value = res.data.content;
      });
    }
    getCon();

    onMounted(() => {
      if (router.currentRoute.value.query.inviteCode) {
        invitedForm.value = router.currentRoute.value.query.inviteCode;
        form.recommend = router.currentRoute.value.query.inviteCode;
        readonly.value = true;
      }
    });

    return {
      form,
      backIcon,
      captBtnText,
      captBtnDisabled,
      invitedForm,
      readonly,
      activeIcon,
      inactiveIcon,
      checked,
      con,
      show,
      onCaptBtn,
      onSubBtn,
      getCon,
      onKnow,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 88px 30px 100px;
  .main {
    margin-top: 61px;
    background-color: #fff;
    background: #ffffff;
    box-shadow: 0px 6px 18px 0px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    position: relative;
    padding: 10px 40px 75px;

    .caisetiao_icn {
      width: 100%;
      height: 10px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .iptBox {
      border-bottom: 1px solid #dce2f5;
      padding-bottom: 13px;
      margin-top: 60px;
      .iptTitle {
        font-size: 36px;
        font-weight: 400;
        color: #333333;
      }
      .iptItem {
        margin-top: 15px;
        .ipt {
          background-color: transparent;
          border: none;
          color: #333;
          font-size: 28px;
          font-weight: 400;
        }
        .captBtn {
          background: transparent;
          border: none;
          font-size: 28px;
          font-weight: 400;
          color: #e00b12;
        }
      }
    }
    .agreement {
      margin-top: 111px;
      .img-icon {
        width: 30px;
        height: 30px;
      }
      :deep(.van-checkbox__label) {
        font-size: 26px;
        font-weight: 400;
        color: #333333;
      }
      .agree {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
        padding-bottom: 6px;
      }
    }
    .subBtn {
      font-size: 32px;
      font-weight: 500;
      color: #ffffff;
      width: 100%;
      height: 88px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      box-shadow: 0px 8px 20px 0px rgba(204, 58, 70, 0.4);
      border-radius: 16px;
      border: none;
      margin-top: 100px;
    }
    .noAccount {
      margin-top: 50px;
      p {
        font-size: 26px;
        font-weight: 400;
        color: #afb0b3;
      }
      button {
        font-size: 26px;
        font-weight: 400;
        color: #e00b12;
        background: transparent;
        border: none;
      }
    }
  }
  .popupBox {
    width: 620px;
    height: 1011px;
    background: #ffffff;
    border-radius: 16px;
    padding: 50px 30px 60px;
    .popupTitle {
      font-size: 36px;
      font-weight: 500;
      color: #333333;
    }
    .popupCon {
      width: 100%;
      height: 680px;
      background: #ffffff;
      border-radius: 16px;
      font-size: 26px;
      font-weight: 400;
      color: #999999;
      margin-top: 31px;
      overflow-y: auto;
    }
    .popupBtn {
      font-size: 32px;
      font-weight: 400;
      color: #ffffff;
      width: 330px;
      height: 80px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      border-radius: 40px;
      border: none;
      margin: 60px auto 0;
      display: block;
    }
  }
}
</style>